<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>图片预览</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <style>
    body {
      margin: 0;
    }

    #app {
      text-align: center;
    }

    button {
      background-color: #d4000054;
      border: 0;
      color: #ffffff9c;
      width: 100px;
      height: 50px;
      position: fixed;
      cursor: pointer;
      outline: none;
    }

    button:hover {
      background-color: #d400008c;
      color: #ffffffd1;
    }

    .btn1 {
      left: 0;
      top: 50%;
    }

    .btn2 {
      right: 0;
      top: 50%;
    }
  </style>

  <script>
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    }
  </script>

  <script>

    window.onload = function () {
      var atlasId = getQueryVariable("id");//图集id

      new Vue({
        el: '#app',
        data: {
          current: 1,
        },
        computed: {
          imgSrc: function () {
            return "https://img.hywly.com/a/1/" + atlasId + "/" + this.current + ".jpg";
          }
        },
        methods: {
          previous: function () {
            this.current--;
          },
          next: function () {
            this.current++;
          }
        }
      })
    };


  </script>

</head>

<body>
<div id="app">
  <button id="btn1" class="btn1" @click="previous">上一页 {{current-1}}</button>
  <img id="img" :src="imgSrc">
  <button id="btn2" class="btn2" @click="next">下一页 {{current+1}}</button>
</div>

</body>

</html>